<template>
	<view>
		<uni-forms ref="form" :rules="rules">
			<view class="item">
				<uni-forms-item label="收货人" name="nickname">
					<uni-easyinput v-model="addrInfo.contact" placeholder="请输入收货人姓名" />
					<!-- <input type="text" :value="addrInfo.contact" placeholder="请输入收货人姓名" /> -->
				</uni-forms-item>
			</view>
			<view class="item">
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput type="number" v-model="addrInfo.phone" placeholder="请输入收货人电话号码" />
				</uni-forms-item>
			</view>
			<view class="item area-ipt" @click="selectArea">
				<uni-forms-item label="所在地区" name="area">
					<!-- <uni-easyinput  v-model="addrInfo.province+addrInfo.city+addrInfo.area" placeholder="" /> -->
					<view class="pca">{{addrInfo.province+addrInfo.city+addrInfo.area}}</view>
					<view class="area-box">
						<image src="/static/icons/my_data_rightarrow@3x.png" class="select-area"></image>
					</view>
				</uni-forms-item>
			</view>
			<view class="item">
				<uni-forms-item label="详细地址 " name="detailedAddress">
					<uni-easyinput v-model="addrInfo.address" placeholder="如道路、门牌号、小区、楼栋号等" />
				</uni-forms-item>
			</view>
		</uni-forms>

		<pcaPicker ref="pcaPicker" @confirm="getPCA"></pcaPicker>

		<view class="gap">
		</view>

		<view class="set-default">
			<text>设为默认地址</text>
			<switch color="#D80E0E" :checked="ifChecked" @change="changeStatus($event,addrInfo._id)" />
		</view>

		<view class="delete" @click="deleteAddress()">
			删除地址
		</view>

		<button type="warn" class="save" @click="saveAddress">保存</button>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import pcaPicker from '../zz-pcaPicker_1.0.0/components/pcaPicker/pcaPicker.vue'
	export default {
		components: {
			pcaPicker
		},
		data() {
			return {
				rules: {},
				addrInfo: {
					addressId: '',
					userId: '',
					province: '',
					city: '',
					area: '',
					address: '',
					contact: '',
					phone: '',
					isDefault: ''
				},
				addressList: [], // 收货地址列表
				ifChecked: false,
				addrList: []
			};
		},
		onLoad(option) {
			this.addrInfo = JSON.parse(option.info)
			console.log(JSON.parse(option.info)._id)
			this.addrInfo.addressId = JSON.parse(option.info)._id
			// this.addrInfo.addressId=
			// this.arrdId=JSON.parse(option.info).addressId
			// console.log(JSON.parse(option.info))
			// this.addressList=JSON.parse(option.addrlist)
			// console.log(JSON.parse(option.info).isDefault)
			// 设置是否是默认收货地址状态
			if (JSON.parse(option.info).isDefault == '1') {
				this.ifChecked = true
			}

		},
		methods: {
			...mapMutations('m_user', ['updateAddress']),
			// 三级联动
			selectArea() {
				this.$refs.pcaPicker.show();
			},
			getPCA(e) {
				this.addrInfo.province = e.province
				this.addrInfo.city = e.city
				this.addrInfo.area = e.area
			},
			// 删除当前地址
			async deleteAddress() {
				// console.log(this.addrInfo._id)
				const {
					data: res
				} = await uni.$http.post('/cart/deleteAddress', {
					addressId: this.addrInfo._id,
					userId: this.userInfo._id
				})
				console.log(res)
				if (res.success == 0) {
					uni.navigateBack({
						delta: 0
					})
					uni.$showMsg('删除成功!')
				}
			},
			// 默认地址是否选中
			async changeStatus(e, id) {
				// 将开关的值赋值给isDefault字段
				if (e.detail.value == true) {
					this.addrInfo.isDefault = '1'
				} else {
					this.addrInfo.isDefault = '0'
				}

			},

			// 获取收货地址
			async getAddressList(id) {
				const {
					data: res
				} = await uni.$http.post('/cart/getAddressList', {
					userId: this.userInfo._id
				})
				// console.log(res)
				this.addressList = res.data
			},

			// 保存地址
			async saveAddress() {
				let reg_tel =
					/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (!reg_tel.test(this.addrInfo.phone)) {
					uni.$showMsg('请检查手机号!')
					return
				} else if (this.addrInfo.province == '' || this.addrInfo.contact == ''||this.addrInfo.address=='') {
					uni.$showMsg('请将信息填写完整!')
					return
				} else {
					const {
						data: res
					} = await uni.$http.post('/cart/updateAddress', this.addrInfo)
					console.log(res)
					if (res.success == 0) uni.$showMsg('地址修改成功!')
					uni.navigateBack({
						delta: 0
					})
					this.updateAddress(this.addrInfo)
				}


			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.area-ipt {
		.pca {
			line-height: 103rpx;
			text-align: right;
		}
	}

	.save {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 50rpx;
		width: 702rpx;
		height: 98rpx;
		background: #D80E0E;
		border-radius: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.item {
		padding: 0 24rpx;
		height: 103rpx;
		border-bottom: 1rpx solid #eee;
		// padding-top: 10rpx;
		box-sizing: border-box;
		position: relative;

		&.area-ipt {
			padding-right: 40rpx;
		}
	}

	.select-area {
		width: 15rpx;
		height: 28rpx;
		position: absolute;
		right: -22rpx;
		bottom: 37rpx;
	}

	.area-box {
		width: 60rpx;
	}

	.gap {
		height: 60rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.set-default {
		height: 104rpx;
		line-height: 104rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		padding: 0 25rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
	}

	.delete {
		width: 382rpx;
		height: 61rpx;
		line-height: 61rpx;
		text-align: center;
		font-size: 34rpx;
		font-weight: 500;
		color: #D80E0E;
		border: 1rpx solid #D80E0E;
		border-radius: 31rpx;
		margin: auto;
		margin-top: 70rpx;
	}
</style>
